<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>账号管理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<div class="d-flex justify-content-center align-items-center vh-100">
<div class="container w-25 border rounded-4 p-3">
  <div class="d-flex justify-content-center">
    <i class="bi bi-person-square" style="font-size: 50px"></i>
  </div>
  <div class="d-flex flex-column gap-3">
    <div>
      <label class="form-label" for="usernameInput">用户名</label>
      <input class="form-control" id="usernameInput" th:value="${user.getUsername()}" readonly>
    </div>
    <div>
      <label class="form-label" for="passwordInput">密码</label>
      <div class="input-group">
        <input class="form-control" id="passwordInput" value="*********" disabled>
        <button type="button" class="btn btn-outline-secondary"
        data-bs-toggle="modal" data-bs-target="#PwdModal">
          <i class="bi bi-pencil-square"></i>
        </button>
      </div>
    </div>
    <div>
      <label class="form-label" for="phoneNumberInput">手机号</label>
      <div class="input-group">
        <input class="form-control" id="phoneNumberInput" th:value="${user.getPhoneNumber()}" disabled>
        <button type="button" class="btn btn-outline-secondary"
                data-bs-toggle="modal" data-bs-target="#PhoneModal">
          <i class="bi bi-pencil-square"></i>
        </button>
      </div>
    </div>
    <a class="btn btn-outline-secondary mt-3" th:href="@{/home}">返回首页</a>
    <a class="btn btn-outline-danger mt-1 mb-2" th:href="@{/logout}">登出账号</a>
  </div>
</div>
</div>
<div class="modal fade" id="PwdModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">更改密码</div>
        <button class="btn btn-close" type="button"
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="PwdForm">
          <div class="form-floating">
            <input id="PwdInput" type="password" name="value"
                   placeholder="输入新密码" class="form-control">
            <label for="PwdInput">新的密码</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary"
            type="submit" id="PwdSubmitBtn">提交</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="PhoneModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">更改手机号</div>
        <button class="btn btn-close" type="button"
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="PhoneForm">
          <div class="form-floating">
            <input id="PhoneInput" type="text" th:value="${user.getPhoneNumber()}"
                   placeholder="输入新手机号" class="form-control" name="value">
            <label for="PhoneInput">手机号</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary"
                type="submit" id="PhoneSubmitBtn">保存</button>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const pwdSubmitBtn = document.getElementById("PwdSubmitBtn");
const phoneSubmitBtn = document.getElementById("PhoneSubmitBtn");

async function submitPwdForm() {
  const pwd = document.getElementById("PwdInput").value;
  try {
    const response = await axios.post(`/api/users/me/password?value=${pwd}`);

    if (response.status === 200) {
      alert("已保存新密码");
      location.reload();
    }
  } catch (error) {
    if (!error.response) {
      console.log(error);
    }
    else if (error.response.status === 400) {
      alert(error.response.data);
    } else {
      console.log(error);
    }
  }
}

pwdSubmitBtn.addEventListener("click", event => {
  event.preventDefault();
  submitPwdForm();
});

async function submitPhoneForm() {
  const phone = document.getElementById("PhoneInput").value;
  try {
    const response = await axios.post(`/api/users/me/phoneNumber?value=${phone}`);

    if (response.status === 200) {
      alert("已保存新手机号");
      location.reload();
    }
  } catch (error) {
    if (!error.response) {
      console.log(error);
    }
    else if (error.response.status === 400) {
      alert(error.response.data);
    } else {
      console.log(error);
    }
  }
}

phoneSubmitBtn.addEventListener("click", event => {
  event.preventDefault();
  submitPhoneForm();
});
</script>
</body>
</html>